<!--@click添加点击事件;可设置背景色，字体颜色，字体大小，按钮宽，高；props分别为：bgcolor，fontColor，fontSize，width，height-->
<template>
  <div ref="formClass" class="formClass">
    <el-form
      ref="formSearch"
      :model="inputValue"
      :inline="true"
      fit
      size="small"
      label-position="left"
      class="form"
    >
      <div ref="contentBox" class="contentBox">
        <div class="searchBox">
          <!-- input框 -->
          <div v-for="(optionItem, indexs) in formContent" :key="indexs">
            <el-form-item
              v-if="
                optionItem.conditionType ===
                  $enum.getDescByValue('Condition_Type', 'input')
              "
              :label="optionItem.displayName"
              :style="{
                width: optionItem.itemWidth
              }"
            >
              <el-input
                v-model="inputValue[optionItem.fieldName]"
                :placeholder="optionItem.defaultValue"
                :type="optionItem.inputType"
              />
            </el-form-item>
            <!--下拉单选通过接口-->
            <el-form-item
              v-else-if="
                optionItem.conditionType ==
                  $enum.getDescByValue('Condition_Type', 'select')
              "
              :label="optionItem.displayName"
              :style="{ width: optionItem.itemWidth }"
            >
              <el-select
                v-if="optionItem.dataSourceType == 0"
                v-model="inputValue[optionItem.fieldName]"
                :placeholder="optionItem.defaultValue"
                clearable
                filterable
                @visible-change="visibleChange($event, optionItem.url)"
              >
                <el-option
                  v-for="(item, index) in selectOption"
                  :key="index"
                  :label="item"
                  :value="index"
                >{{ item }}</el-option>
              </el-select>

              <!--下拉单选通过数组-->
              <el-select
                v-else-if="optionItem.dataSourceType == 1"
                v-model="inputValue[optionItem.fieldName]"
                :placeholder="optionItem.defaultValue"
                clearable
              >
                <el-option
                  v-for="item in optionItem.dataSource"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <!--单选枚举-->
              <el-select
                v-else-if="optionItem.dataSourceType == 2"
                v-model="inputValue[optionItem.fieldName]"
                :placeholder="optionItem.defaultValue"
                value-key="Name"
                clearable
                @clear="clearOption($event, optionItem.fieldName)"
              >
                <el-option
                  v-for="item in $orgEnum[optionItem.url].slice(0, -1)"
                  :key="item.Name"
                  :label="item.Text"
                  :value="item.Id"
                >{{ item.Text }}</el-option>
              </el-select>
              <!-- 单选数组枚举 -->
              <el-select
                v-else-if="optionItem.dataSourceType == 4"
                v-model="inputValue[optionItem.fieldName]"
                multiple
                :multiple-limit="optionItem.multiplelimit"
                :placeholder="optionItem.defaultValue"
                value-key="Name"
                collapse-tags
                @change="selectChange"
              >
                <el-option
                  v-for="item in $orgEnum[optionItem.url].slice(0, -1)"
                  :key="item.Name"
                  :label="item.Text"
                  :value="item.Id"
                >{{ item.Text }}</el-option>
              </el-select>
            </el-form-item>
            <!--下拉多选-->
            <el-form-item
              v-if="
                optionItem.conditionType ==
                  $enum.getDescByValue('Condition_Type', 'mixedSelect')
              "
              :label="optionItem.displayName"
              :style="{ width: optionItem.itemWidth }"
            >
              <el-select
                v-model="inputValue[optionItem.fieldName]"
                multiple
                popper-class="select-popper"
                class="select-style"
                :placeholder="inputValue[optionItem.defaultValue]"
              >
                <el-option
                  v-for="item in optionItem.dataSource"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <!--三级联动-->
            <el-form-item
              v-if="
                optionItem.conditionType ==
                  $enum.getDescByValue('Condition_Type', 'cascader')
              "
              :label="optionItem.displayName"
              :style="{ width: optionItem.itemWidth }"
            >
              <el-select
                ref="inputRef"
                v-model="SelectdropDown"
                multiple
                :placeholder="optionItem.defaultValue"
                collapse-tags
                :popper-append-to-body="false"
                class="select-style"
                popper-class="select-popper"
                value-key="id"
                @visible-change="toOpen"
                @remove-tag="removeTag(optionItem.fieldName, $event)"
              >
                <template slot="empty">
                  <div ref="dropdown" class="dropDown">
                    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
                      <el-tab-pane
                        v-for="tabitem in tabs"
                        :key="tabitem.value"
                        :name="tabitem.id.toString()"
                      >
                        <span slot="label">{{ tabitem.name }}</span>
                        <div value class="option">
                          <span>区域：</span>
                          <el-checkbox-group
                            v-model="areaCodeDic"
                            @change="
                              checkboxHandle($event, optionItem.fieldName)
                            "
                          >
                            <el-checkbox
                              v-for="(item, index) in areaCodeDicList"
                              :key="index"
                              :label="index"
                            >{{ item }}</el-checkbox>
                          </el-checkbox-group>
                        </div>
                        <div value class="option">
                          <span>运营商/类目：</span>
                          <el-checkbox-group
                            v-model="arsIdDic"
                            @change="
                              checkboxHandle($event, optionItem.fieldName)
                            "
                          >
                            <el-checkbox
                              v-for="(item, index) in arsIdDicList"
                              :key="index"
                              :label="index"
                            >{{ item }}</el-checkbox>
                          </el-checkbox-group>
                        </div>
                        <div value class="option">
                          <span>面值：</span>
                          <el-checkbox-group
                            v-model="denomInc"
                            @change="
                              checkboxHandle($event, optionItem.fieldName)
                            "
                          >
                            <el-checkbox
                              v-for="(item, index) in denomIncList"
                              :key="index"
                              :label="item"
                            >{{ item }}</el-checkbox>
                          </el-checkbox-group>
                        </div>
                      </el-tab-pane>
                    </el-tabs>
                  </div>
                </template>
              </el-select>
            </el-form-item>
            <!--三级联动-->

            <!--单选联级选择-->
            <el-form-item
              v-if="
                optionItem.conditionType ==
                  $enum.getDescByValue('Condition_Type', 'radioCascader')
              "
              :label="optionItem.displayName"
            >
              <el-cascader
                ref="radiocascader"
                v-model="inputValue[optionItem.fieldName]"
                class="radiocascader"
                :props="{ checkStrictly: true }"
                clearable
                :options="brandModelList"
                @visible-change="cascaderData($event, optionItem.url)"
              />
            </el-form-item>
            <!--单选联级选择-->

            <el-form-item
              v-if="
                optionItem.conditionType ==
                  $enum.getDescByValue('Condition_Type', 'datePicker')
              "
              :label="optionItem.displayName"
              :style="{ width: optionItem.itemWidth }"
              class="dateRange"
            >
              <el-date-picker
                v-model="inputValue[optionItem.fieldName]"
                type="datetimerange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
                :default-time="['00:00:00', '23:59:59']"
              />
              <!-- value-format="yyyy-MM-dd" -->
            </el-form-item>
          </div>
        </div>
        <div class="buttonSearch">
          <el-form-item v-if="inputValue">
            <el-button type="primary" @click="toSearch()">查询</el-button>
            <!-- <el-button type="primary" @click="handleCommand('add')">新增</el-button> -->
            <!-- <el-button type="primary" @click="resetForm('formSearch')">重置</el-button> -->
          </el-form-item>
        </div>
        <div class="buttonBox">
          <el-form-item style="margin-left:15px">
               <el-button :type="item.class"  v-for="item in btnContent" :key="item.id"  @click="handleCommand(item.remark)">{{ item.actionText }}</el-button>
            <!-- <el-dropdown v-if="btnContent.length>0" @command="handleCommand">
              <el-button type="primary">
                更多
                <i class="el-icon-arrow-down el-icon--right" />
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="item in btnContent"
                  :key="item.id"
                  :command="item.remark"
                >{{ item.actionText }}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown> -->
          </el-form-item>
        </div>
      
      </div>
        <!-- <div class="buttonBox">
          <el-form-item style="margin-left:15px">
               <el-button :type="item.class"  v-for="item in btnContent" :key="item.id"  @click="handleCommand(item.remark)">{{ item.actionText }}</el-button>
            <el-dropdown v-if="btnContent.length>0" @command="handleCommand">
              <el-button type="primary">
                更多
                <i class="el-icon-arrow-down el-icon--right" />
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="item in btnContent"
                  :key="item.id"
                  :command="item.remark"
                >{{ item.actionText }}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-form-item>
        </div> -->
    </el-form>
  </div>
</template>
<script>
import methods from "./methods";
const EVENT_INPUT = "input";
export default {
  name: "Search",
  components: {},
  mixins: [],
  props: {
    // 搜索内容集合
    formContent: {
      type: [Object, Array]
    },
    btnContent: {
      type: [Object, Array]
    },
    placeholder: {
      type: String,
      default: ""
    },
    value: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      activeName: "100",
      typeId: "",
      tabs: [],
      areaCodeDicList: [],
      arsIdDicList: [],
      denomIncList: [],
      brandModelList: [],
      keys: [],
      areaCodeDic: [],
      arsIdDic: [],
      denomInc: [],
      SelectdropDown: null,
      selectOption: [],
      inputValue: this.value,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "本月",
            onClick(picker) {
              const end = new Date();
              var d = new Date();
              d.setDate(1);
              const start = d;
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "本周",
            onClick(picker) {
              const date = new Date();
              const weekday = date.getDay() || 7;
              const end = new Date();
              date.setDate(date.getDate() - weekday + 1);
              const start = date;
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }
    };
  },
  computed: {
    getItem() {
      return function(val) {
        setTimeout(() => {
          // const result = this.$http.get(val);
        }, 1000);
      };
    }
  },
  watch: {
    value: {
      handler(newValue) {
        this.inputValue = newValue;
      },
      deep: true
    },
    inputValue: {
      handler(newValue) {
        this.$emit(EVENT_INPUT, newValue);
      },
      deep: true
    }
  },
  // ------------------------------------------------------------------
  // pragma mark - Life Cycle(生命周期)
  // ------------------------------------------------------------------
  created() {
    this.createdInit();
  },
  mounted() {
    this.mountedInit();
    // 点击文本自动点击前面的input触发选择
    setInterval(function() {
      document.querySelectorAll(".el-cascader-node__label").forEach(el => {
        el.onclick = function() {
          if (this.previousElementSibling) this.previousElementSibling.click();
        };
      });
    }, 1000);
  },
  methods
};
</script>
<style scoped lang="scss">
.contentBox {
  display: flex;
  padding: 0 5px;
}
.searchBox {
  display: flex;
  margin-right: 20px;
  flex-wrap: wrap;
}
.buttonBox {
  display: block;
}
.el-form-item {
  margin: 5px;
}

.el-select__tags {
  flex-wrap: nowrap;
}
.el-form-item__content {
  display: flex;
  // word-spacing:-1em;
  // min-width: 150px;
}
.shortcut {
  padding: 0 10px;
  display: flex;
  .tabs {
    margin: 10px 10px 10px 0;
  }
}

.select-popper {
  // background-color: rgba(0, 0, 0, 0.8);;
  // border-radius: 0.08rem;
  // border: solid 0.02rem #1c395d;
  // font-family: PingFangSC-Regular;
  .el-select-dropdown__item.selected {
    // font-family: PingFangSC-Regular;
    // font-size: 0.28rem;
    // color: rgba(74, 141, 253, 1);
  }
  .el-select-dropdown__item.selected::after {
    content: "";
  }
  ul {
    // display: flex;
    // flex-wrap: wrap;
  }
  .el-select-dropdown__list {
    padding: 0;
  }

  li {
    // color: #000;
    // background: transparent;
    // font-size: 0.28rem;
    // width: 500px;
  }
  .el-select-dropdown__item {
    margin-right: 10px;
  }
  .el-select-dropdown__item:hover,
  .el-select-dropdown__item.hover {
    // background-color: rgba(110, 147, 206, 0.2);
    // margin-right: 1px;
  }
  .popper__arrow::after {
    // border-bottom-color: rgba(0, 0, 0, 0.8);;
  }
  .popper__arrow {
    // border-bottom-color: rgba(0, 0, 0, 0.8);;
  }
  .el-select-dropdown__empty {
    // padding: 0.2rem;
    // font-size: 0.28rem;
  }
}
.option {
  display: flex;
  flex-wrap: wrap;
  max-width: 500px;
  margin-top: 10px;
  span {
    margin-right: 10px;
  }
  .el-select-dropdown__item.selected::after {
    content: "";
  }
}
.el-tabs {
  max-width: 300px;
}

.el-dropdown-menu {
  padding: 0;
}
.dateRange >>> .el-date-editor--daterange {
  max-width: 250px;
}
.el-radio {
  visibility: hidden;
}
</style>
